<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>异清轩博客</title>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <link href="js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="js/ele-2.15.7/index.js"></script>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
    <link rel="shortcut icon" href="images/icon/favicon.ico">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/nprogress.js"></script>
    <script src="js/jquery.lazyload.min.js"></script>

    <script src="../../../../../login-starter/src/main/resources/static/js/login.js"></script>
    <script src="js/blog.js"></script>
</head>

<style>
    html,body,#app{
        height: 100%;
        /*开启滚动条*/
        overflow: auto;
    }
    html,body{
        /*隐藏滚动条*/
        overflow: hidden;
    }
</style>

<body class="user-select">
<div id="app"  v-infinite-scroll="load"  infinite-scroll-distance="1" infinite-scroll-delay="300">
    <mymain ref="lg" @logined="onlogin">
        <section class="container">
            <div class="content-wrap">
                <div class="content">
                    <div class="jumbotron">
                        <h1>欢迎访问异清轩博客</h1>
                        <p>在这里可以看到前端技术，后端程序，网站内容管理系统等文章，还有我的程序人生！</p>
                    </div>
                    <div id="focusslide" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#focusslide" data-slide-to="0" class="active"></li>
                            <li data-target="#focusslide" data-slide-to="1"></li>
                            <li data-target="#focusslide" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            <div class="item active"><a href="" target="_blank"><img src="images/banner/banner_01.jpg"
                                                                                     alt="" class="img-responsive"></a>
                                <!--<div class="carousel-caption"> </div>-->
                            </div>
                            <div class="item"><a href="" target="_blank"><img src="images/banner/banner_02.jpg" alt=""
                                                                              class="img-responsive"></a>
                                <!--<div class="carousel-caption"> </div>-->
                            </div>
                            <div class="item"><a href="" target="_blank"><img src="images/banner/banner_03.jpg" alt=""
                                                                              class="img-responsive"></a>
                                <!--<div class="carousel-caption"> </div>-->
                            </div>
                        </div>
                        <a class="left carousel-control" href="#focusslide" role="button" data-slide="prev"
                           rel="nofollow"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">上一个</span> </a> <a class="right carousel-control"
                                                                        href="#focusslide" role="button"
                                                                        data-slide="next" rel="nofollow"> <span
                            class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">下一个</span>
                    </a></div>
                    <article class="excerpt-minic excerpt-minic-index">
                        <h2><span class="red">【今日推荐】</span><a href="" title="">从下载看我们该如何做事</a></h2>
                        <p class="note">一次我下载几部电影，发现如果同时下载多部要等上几个小时，然后我把最想看的做个先后排序，去设置同时只能下载一部，结果是不到一杯茶功夫我就能看到最想看的电影。
                            这就像我们一段时间内想干成很多事情，是同时干还是有选择有顺序的干，结果很不一样。同时...</p>
                    </article>
                    <div class="title">
                        <h3>最新发布</h3>
                        <div class="more"><a href="">PHP</a><a href="">JavaScript</a><a href="">EmpireCMS</a><a href="">Apache</a><a
                                href="">MySQL</a></div>
                    </div>
                    <article class="excerpt excerpt-1" v-for="(a , index ) in list">
                        <a class="focus" :href="'article.html?id=' + a.article.id " title="" >
                            <img class="thumb"  data-original="images/excerpt.jpg"
                                 v-if="a.article.titleImgs" :src="a.article.titleImgs"
                                 alt="图片">
                            <img class="thumb"  data-original="images/excerpt.jpg"
                                 v-else src="images/excerpt.jpg"
                                 alt="">
                        </a>
                        <header>
                            <a class="cat" :href="'category.html?id=' + a.article.categoryId">{{a.article.name}}
                                <i></i>
                            </a>
                            <h2>
                                <a :href="'article.html?id=' + a.article.id " title="">{{a.article.title}}</a>
                            </h2>
                        </header>
                        <p class="meta">
                            <time class="time"><i class="glyphicon glyphicon-time"></i> {{a.createTime}}</time>
                            <span class="views"><i class="glyphicon glyphicon-eye-open"></i> 共{{a.article.readCnt}}人围观</span> <a
                                class="comment" href="article.html#comment"><i class="glyphicon glyphicon-comment"></i>
                            0个不明物体</a></p>
                        <div class="hide_note" v-html="a.article.content" style="display: none"></div>
                    </article>



                    </div>
<!--                    <div id="pagination">-->
<!--                        <a href="?" class="next">next</a>-->
<!--                    </div>-->
                </div>
            <aside class="sidebar">
                <div class="fixed">
                    <div class="widget widget-tabs">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#notice" aria-controls="notice" role="tab"
                                                                      data-toggle="tab">网站公告</a></li>
                            <li role="presentation"><a href="#centre" aria-controls="centre" role="tab"
                                                       data-toggle="tab">会员中心</a></li>
                            <li role="presentation"><a href="#contact" aria-controls="contact" role="tab"
                                                       data-toggle="tab">联系站长</a></li>
                        </ul>
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane notice active" id="notice">
                                <ul>
                                    <li>
                                        <time datetime="2016-01-04">01-04</time>
                                        <a href="" target="_blank">欢迎访问异清轩博客</a></li>
                                    <li>
                                        <time datetime="2016-01-04">01-04</time>
                                        <a target="_blank"
                                           href="">在这里可以看到前端技术，后端程序，网站内容管理系统等文章，还有我的程序人生！</a>
                                    </li>
                                    <li>
                                        <time datetime="2016-01-04">01-04</time>
                                        <a target="_blank" href="">在这个小工具中最多可以调用五条</a></li>
                                </ul>
                            </div>
                            <div role="tabpanel" class="tab-pane centre" id="centre">
                                <h4>需要登录才能进入会员中心</h4>
                                <p><a data-toggle="modal" data-target="#loginModal" class="btn btn-primary" @click.prevent="showLoginWin">立即登录</a>
                                    <a href="javascript:;" class="btn btn-default">现在注册</a></p>
                            </div>
                            <div role="tabpanel" class="tab-pane contact" id="contact">
                                <h2>Email:<br/>
                                    <a href="mailto:admin@ylsat.com" data-toggle="tooltip" data-placement="bottom"
                                       title="admin@ylsat.com">admin@ylsat.com</a></h2>
                            </div>
                        </div>
                    </div>
                    <div class="widget widget_search">
                        <form class="navbar-form" action="/Search" method="post">
                            <div class="input-group">
                                <input type="text" name="keyword" class="form-control" size="35"
                                       placeholder="请输入关键字" maxlength="15" autocomplete="off">
                                <span class="input-group-btn">
            <button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
            </span></div>
                        </form>
                    </div>
                </div>
                <div class="widget widget_sentence">
                    <h3>每日一句</h3>
                    <div class="widget-sentence-content">
                        <h4>2016年01月05日星期二</h4>
                        <p>Do not let what you cannot do interfere with what you can do.<br/>
                            别让你不能做的事妨碍到你能做的事。（John Wooden）</p>
                    </div>
                </div>
                <div class="widget widget_hot">
                    <h3>争锋相对</h3>
                    <ul>
                        <li v-for="a in argues">
                            <a :href=`argue.html?id=${a.id}`>
                                <span class="text">{{a.title}}</span>
                                <span class="muted">
                                    <i class="glyphicon glyphicon-time"></i>
                                    {{a.createTime}}
                                </span>
                                <span class="muted">
                                    <i class="glyphicon glyphicon-eye-open"></i>{{a.pNums}}
                                    <i class="glyphicon glyphicon-eye-open"></i>{{a.nNums}}
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="widget widget_hot">
                    <h3>热门文章</h3>
                    <ul>
                        <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg"
                                                                    src="images/excerpt.jpg" alt=""></span><span
                                class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i
                                class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i
                                class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
                        <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg"
                                                                    src="images/excerpt.jpg" alt=""></span><span
                                class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i
                                class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i
                                class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
                        <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg"
                                                                    src="images/excerpt.jpg" alt=""></span><span
                                class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i
                                class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i
                                class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
                        <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg"
                                                                    src="images/excerpt.jpg" alt=""></span><span
                                class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i
                                class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i
                                class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
                        <li><a href=""><span class="thumbnail"><img class="thumb" data-original="images/excerpt.jpg"
                                                                    src="images/excerpt.jpg" alt=""></span><span
                                class="text">php如何判断一个日期的格式是否正确</span><span class="muted"><i
                                class="glyphicon glyphicon-time"></i> 2016-1-4 </span><span class="muted"><i
                                class="glyphicon glyphicon-eye-open"></i> 120</span></a></li>
                    </ul>
                </div>
            </aside>
        </section>
    </mymain>
</div>

<script>
    var v = new Vue({
        el: "#app",
        data: {
            // 争锋相对
            argues: [],
            // 文章
            list: [],
            page:0,
        },
        methods: {
            onlogin(user) {
                this.user = user;
            },
            showLoginWin() {
                this.$refs.lg.showLoginWin();
            },
            //首页文章
            load(){
                // 页码超出,不发送请求
                if (this.page == -1){
                    this.$message.warning("没有更多啦！");
                    return;
                }
                axios.post("/blog/article/selectPage?page="+ ++this.page).then(res=>{
                    if(res.data.code){
                        console.log(res.data.data)
                        this.list = this.list.concat(res.data.data);
                        //下次渲染事件监听
                        this.$nextTick(()=>{
                            let hds = document.querySelectorAll(".hide_note");
                            hds.forEach(hd=>{
                                let text = hd.innerText.length > 50 ? hd.innerText.substring(0,50) + "..." : hd.innerText;
                                hd.previousElementSibling.innerHTML = text;
                            })
                        });
                    }else if (!res.data.code){
                        this.page = -1;
                        this.$message.warning("没有更多啦！");
                    }
                })
            },
        },
        created() {
            //争锋相对
            axios.get("/blog/argue/queryPage").then(res => this.argues = res.data);
            //首页文章
            this.load();
        }
    })
</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ias.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>